<template>
	<view class="warp">
		<up-card :full="true" :head-border-bottom="false" border-radius="0" v-for="(item,i) in props.data">
			<template #head>
				<view class="head_box">
					<view class="" style="display: flex;">
						<up-icon :name="item.imgUrl" :size="40" />
						<view class="" style="display: flex;flex-direction: column;margin-left: 10rpx;">
							<span>{{item.title}}</span>
							<span style="font-size: 25rpx;color: #b1b1b1;"> {{date}}</span>
						</view>
					</view>

					<view class="">
						<up-icon name="close" @click="click111(item,i)" />
					</view>

				</view>
			</template>
			<template #body>
				<view class="body_box" v-if="item.title=='发货提醒'">
					<text>您有 0种食材需要发货</text>
					<text>请尽快完成食材发货</text>
				</view>
				<view class="body_box" v-if="item.title=='申请通过'">
					<text>您所申请供应食材0种已通过</text>
					<text>如果有什么问题请及时联系我们</text>
				</view>
				<view class="body_box" v-if="item.title=='问题反馈'">
					<text>您所反馈的问题已回复</text>
					<text>有您的支持，我们会做得更好</text>
				</view>
			</template>
			<template #foot>
				<view class="" style="text-align: center;">
					<text style="color: #e67e22;">{{item.title=="发货提醒"?'立即发货':'立即查看'}}</text>

				</view>

			</template>
		</up-card>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import dayjs from 'dayjs';
	const props = defineProps({
		data: Array
	})
	const date = ref(dayjs().format('MM-DD HH:mm'))



	const click111 = (item, index) => {
		props.data.splice(index, 1)
		console.log('item', item)
		console.log('index', index)

	}

	onMounted(() => {

	})
</script>

<style lang="scss" scoped>
	.warp {

		.head_box {
			display: flex;
			justify-content: space-between;
		}

		.body_box {
			display: flex;
			flex-direction: column;
			align-items: center;

			text:nth-child(1) {
				padding: 0 0 20rpx 0
			}
		}
	}
</style>